<template>
  <div class="app-data">
    <div class="common-content cont-main">
      <component :is="componentTag" :data="appStatusData" :datas="datas"></component>
    </div>
    <div class="right-group">
      <RightNavGroup
          :datas="echartNav"
          :componentTag="componentTag"
          @compChange="compChange">
      </RightNavGroup>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import RightNavGroup from './comp2/RightNavGroup'

import StatusTable from './comp2/StatusTable'
import StackedLineVue from "./comp2/StackedLine";
import DynamicBarLine from "./comp2/DynamicBarLine";
import EchartsQuartetAir from "./comp2/EchartsQuartetAir";

export default {
  name: "AppData",
  components: {
    RightNavGroup,
    StatusTable,
    StackedLineVue,
    DynamicBarLine,
    EchartsQuartetAir,
  },
  data() {
    return {
      componentTag: 'StatusTable',
      echartNav: [
        {name: '', comp: 'StatusTable', img: '/static/images/echarts/table.png'},
        {name: '', comp: 'StackedLineVue', img: '/static/images/echarts/lines.png'},
        {name: '', comp: 'DynamicBarLine', img: '/static/images/echarts/lineorbar.png'},
        {name: '', comp: 'EchartsQuartetAir', img: '/static/images/echarts/quartet2.png'}
      ],
      datas: []
    };
  },
  computed: {
    ...mapGetters(['appStatusData'])
  },
  watch: {
    appStatusData(val) {
      if (this.datas.length > 60) {
        this.datas.shift()
      }
      this.datas.push({
        date: val.data.date,
        voltage: parseFloat(val.data.voltage),  // 电压（KV）
        current: parseFloat(val.data.current),      // 电流（A）
        drag: parseFloat(val.data.drag),// 阻力（KPa）
        temperAture: parseFloat(val.data.temperAture),  // 温度
      })
    },
  },
  mounted() {
  },
  methods: {
    compChange(item) {
      this.componentTag = item.comp
    }
  }
};
</script>

<style lang="less" scoped>
  .app-data {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 15px;
    display: flex;

    .cont-main {
      height: 100%;
      padding: 15px;
      flex: 1;
    }

    .right-group {
      width: 100px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      margin-left: 15px;
    }
  }
</style>
